<template>
  <div v-if="plist" class="cart">
    <div class="topbar">
      <van-nav-bar title="购物车" right-text="编辑" left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <i class="iconfont icon-zuojiantou"></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="scroll">
      <div class="top-b">
        <p class="left"><span>[全新商品]满688元免运费</span></p>
        <p>1/1</p>
      </div>
      <div class="cont">
        <div class="package" v-for="(subitem) in plist" :key="subitem.productId">

            <div class="package-item">
              <div class="checkbox">
                <van-checkbox v-model="subitem.free" checked-color="#000" shape="square"/>
              </div>
              <div class="desc">
                <van-card
                    :num="subitem.qty"
                    :thumb="subitem.imgUrl"
                  >
                    <template #price>
                      <span class="van-card__price">￥{{subitem.price}}</span>
                    </template>
                    <template #title>
                      <p class="van-card__title">{{subitem.brand}}</p>
                    </template>
                    <template #desc>
                      <p class="van-card__desc">{{subitem.name}}</p>
                    </template>
                    <template #tags>
                      <p><span>{{subitem.color}}</span>
                      <span>{{subitem.size}}</span></p>
                    </template>
                  </van-card>
              </div>
            </div>

        </div>
      </div>
    </div>
    <div class="botbar">
      <div class="left">
        <div class="checkbox">
          <van-checkbox v-model="checkAll"  checked-color="#000" shape="square" />
        </div>
        <span>全选</span>
      </div>
      <div class="center">
        <p>
          <b>总价:</b>
          <span>￥{{totalPrice}}</span>
        </p>
      </div>
      <div class="right">
        <p @click="count">去结算({{priceLehgth.length}})</p>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { NavBar, Icon, Card, Checkbox, CheckboxGroup,Toast } from 'vant';
import {mapActions,mapState} from "vuex"
Vue.use(NavBar).use(Icon).use(Card).use(Checkbox).use(CheckboxGroup).use(Toast)
export default {
  computed:{
    ...mapState("cart",["plist"]),
    checkAll:{
      get(){
        return (this.plist.filter(item=>item.free).length === this.plist.length)
      },
      set(val){
        this.plist.forEach(item=>item.free=val)
      }
    },
    totalPrice(){
       return this.priceLehgth.reduce((p,c)=>{
         return p + c.price * c.qty
       },0)
    },
    priceLehgth(){
      return this.plist.filter(item=>item.free)
    }
  },
  created(){
    if(!localStorage.getItem("cart-product")){
      this.getCartPlist()
    }
  },
  methods: {
    ...mapActions("cart",["getCartPlist"]),
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {
     this.$router.push("/cart/edit")
    },
    count(){
      Toast.success("支付成功")
    }
  }
}
</script>

<style lang="scss" >
.van-nav-bar__text{color: #222; font-size: 0.14rem;}
.van-nav-bar__title{
    font-weight: 700;
    font-size: 0.16rem;
}
.van-nav-bar__left{
  display: flex;
}
.icon-zuojiantou{font-size: 0.26rem;font-weight: 900;}
.van-nav-bar__text{color: #222;}
.cart{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  width: 100%;
  height: 100%;
  .topbar{background-color: #fff;}
  .scroll{overflow-y:auto;flex:1;width: 100%;}
  .top-b{
    background: #fff;
    display: flex;
    height: 0.44rem;
    align-items: center;
    padding:0 0.08rem;
    box-shadow: 0 0.013333rem 0  #ccc;

    .left{
      flex: 1;
      span{color: red;font-size:0.14rem;}
    }
  }
  .cont{width:100%;}
  .package{
    border-bottom: 0.5px solid #ccc;
    background:#fff;
    margin:0.1rem 0;
    box-shadow: 0 0.013333rem 0  #ccc;
    .package-name{
      height: 0.44rem;
      display: flex;
      align-items: center;
      border-bottom: 0.5px solid #ccc;
      span{color:#222;}
      .checkbox{
        width: 11%;
        display: flex;
        justify-content: center;
      }
    }
    .package-item{
      display: flex;
      height: 1.4rem;
      border-bottom: 0.5px solid #ccc;
      .checkbox{
        width: 11%;
        display: flex;
        justify-content: center;
      }
      .desc{
        flex:1;
        overflow: hidden;
        .van-card{height: 100%;
        background-color: #fff;
          .van-card__header{height: 100%;
            .van-card__thumb{height: 100%;
              .van-image__img{
                max-width: 100%;
              }
            }
            .van-card__title,.van-card__desc{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-bottom: .133333rem;
              color: #000;
              font-size: 0.16rem;
        font-weight: 900;
        line-height: 1.8;
              font-family: -apple-system,BlinkMacSystemFont,"'PingFang SC'",Helvetica Neue,Helvetica,Arial,sans-serif;
            }
            .van-card__desc{
              font-size: 0.14rem;
              line-height: 1;
            }
            p{span{color:#999;margin-right: 0.18rem;}}
            .van-card__bottom{
              margin-bottom: 0.08rem;
              .van-card__price{
                color:#dd2828;
                font-size: 0.16rem;
                font-weight: 900;
                line-height: 1;
              }
            }
          }
        }

      }
    }
  }
  .botbar{
    height: 0.5rem;
    background-color: #fff;
    box-shadow: 0 -0.04rem 0.08rem 0 rgba(0,0,0,.05);
    border-top: 0.5px solid #ccc;
    display: flex;
    align-items: center;
    .left{
      display: flex;
      width:1rem;
      color:#222;
      .checkbox{
        width:0.46rem;
        display: flex;
        justify-content: center;
      }
    }
    .center{
      flex:1;
      text-align: right;
      padding-right: 0.14rem;
      b{
        font-size: 0.18rem;
        font-weight: 900;
        line-height: 0.5rem;
        color: #222;
      }
      span{
        font-size: 0.16rem;
        font-weight: 900;
        line-height: 0.5rem;
        color: red;
      }
    }
    .right{
      width: 1.1rem;
      text-align: center;
      background-color: #dd2828;
      height: 100%;
      color:#fff;
      font-size: 0.14rem;
        font-weight: 900;
        line-height: 0.5rem;
    }
  }
}
</style>
